<div class="main-container">
  <div class="notifier">
    <app-notifier></app-notifier>
  </div>
  <header class="header header-6">
    <div class="branding">
      <a [routerLink]="['/']">
        <clr-icon shape="octant-logo"></clr-icon>
        <span class="title">Octant</span>
      </a>
    </div>
    <div class="header-nav">
      <div class="input-filter">
        <app-input-filter></app-input-filter>
      </div>
    </div>
    <div class="header-actions">
      <div class="namespace-switcher header-centered">
        <app-namespace></app-namespace>
      </div>
      <app-context-selector class="header-centered"></app-context-selector>
      <app-helper class="header-centered"></app-helper>
    </div>
  </header>
  <div class="content-container">
    <div class="navigation">
      <app-navigation></app-navigation>
    </div>
    <div class="content-area">
      <router-outlet></router-outlet>
    </div>
  </div>
  <div class="quick-switcher">
    <app-quick-switcher></app-quick-switcher>
  </div>
  <div class="preferences">
    <app-preferences
      [(isOpen)]="preferencesOpened"
      [preferences]="preferences"
      (preferencesChanged)="preferencesChanged($event)"
    ></app-preferences>
  </div>
</div>
